import ReactDOM from 'react-dom';
import * as React from 'react';
import classNames from 'classnames';
import './style/index.less';
import { PickerPanelProps } from './interface';
import dayjs from 'dayjs';

const PickerPanel: React.FC<PickerPanelProps> = function (panelprops) {
  const {
    isOpen,
    value,
    prefixCls = 'dt-picker',
    style
  } = panelprops;

  if (!isOpen) {
    return null;
  }

  const pickerCls = classNames(
    `${prefixCls}-wrapper`
  );
  const pickerDropCla = classNames(
    `${prefixCls}-dropdown`
  );

  return ReactDOM.createPortal(
    <div className={pickerCls}>
      <div>
        <div className={pickerDropCla} style={style}>
          <div className={`${prefixCls}-dropdown-container`}>
            {dayjs(value).toString()}
            <div className={`${prefixCls}-panel`}>

            </div>
            <div className={`${prefixCls}-footer`}>

            </div>
          </div>
        </div>
      </div>
    </div>,
    document.body
  );
};

export default PickerPanel;